<template>
  <div>
    <div style="width:100%;height:600px" ref="chart"></div>
  </div>
</template>

<script>
// 在axios里面根据请求返回值进行缀加操作生成的新数组，即使新数组是全局变量，也最好不要离开then方法之外去引用
import axios from "axios";
import { emlPath } from "./config/config";
export default {
  data() {
    return {
      emlPath: encodeURIComponent(emlPath[0]),
      Statistics: [], //存分组
      tags: [] //类，存tags
    };
  },
  created() {
    this.initStatistic();
    /*  this.$nextTick(() => {
      this.initCharts();
    }) */
  },
  computed: {
    //进入的用户
    userSO_json() {
      let userSO_json = JSON.parse(sessionStorage.getItem("userSO_json"));
      return userSO_json;
    }
  },
  methods: {
    //初始化数据
    initCharts(tags, Statistics) {
      let myChart = this.$echarts.init(this.$refs.chart);
      // 绘制图表
      myChart.setOption({
        title: {
          text: "ES解析站点用户邮件来源", //主标题
          subtext: "来源分类", //副标题
          x: "center" //x轴方向对齐方式
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          bottom: "bottom",

          /*  data: [
            "网易邮箱",
            "腾讯邮箱",
            "教育邮箱",
            "中国大学慕课mooc",
            "Microsoft OneDrive",
            "中国平安银行",
            "Google",
            "美团",
            "华为",
            "51job",
            "三方公司邮箱..其他"
          ] */
          data: tags
        },
        series: [
          {
            name: "邮件来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            /* data: [
              { value: 200, name: "网易邮箱" },
              { value: 310, name: "腾讯邮箱" },
              { value: 234, name: "教育邮箱" },
              { value: 135, name: "中国大学慕课mooc" },
              { value: 1548, name: "Microsoft OneDrive" },
              { value: 335, name: "中国平安银行" },
              { value: 335, name: "Google" },
              { value: 335, name: "美团" },
              { value: 335, name: "华为" },
              { value: 335, name: "51job" },
              { value: 335, name: "三方公司邮箱..其他" }
            ], */
            data: Statistics,
            itemStyle: {
              emphasis: {
                shadowBlur: 20,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
    },
    async initStatistic() {
      axios
        .get("/api/EmlServerController/serverEmls/allemls?userName=" + this.userSO_json.userName,{
          headers: {
            //头部信息
            "Content-Type": "application/json;charset=utf-8",
            token: this.userSO_json.token
          }
        })
        .then(response => {
          var list = response.data.data;
          for (var i = 0; i < list.length; i++) {
            let senderAddress = list[i].senderAddress;
            var name = "";
            if (
              senderAddress.split("163").length != 1 ||
              senderAddress.split("netease").length != 1
            ) {
              name = "网易邮箱";
            } else if (senderAddress.split("qq").length != 1) {
              name = "腾讯邮箱";
            } else if (senderAddress.split("edu").length != 1) {
              name = "教育邮箱";
            } else if (senderAddress.split("icourse").length != 1) {
              name = "中国大学慕课mooc";
            } else if (senderAddress.split("onedrive").length != 1) {
              name = "Microsoft OneDrive";
            } else if (senderAddress.split("pingan").length != 1) {
              name = "中国平安银行";
            } else if (senderAddress.split("google").length != 1) {
              name = "Google";
            } else if (senderAddress.split("meituan").length != 1) {
              name = "美团";
            } else if (senderAddress.split("huawei").length != 1) {
              name = "华为";
            } else if (senderAddress.split("51job").length != 1) {
              name = "51job";
            } else {
              name = "三方邮箱..其他";
            }

            //初始化
            var flag = 0;
            var existFlag = false;
            if (this.Statistics.length == 0) {
              flag = 1;
              existFlag = true;
              this.tags.push(name);
              this.Statistics.push({
                value: 1,
                name: name
              });
            }
            //存在加一

            if (this.Statistics.length >= 1 && flag == 0) {
              this.Statistics.forEach(function(currentValue, index) {
                if (currentValue.name == name) {
                  existFlag = true;
                  currentValue.value++;
                  return;//只是return这个forEach方法
                }
              });
            }
            //不存在追加
            if (existFlag == false) {
              this.tags.push(name);
              this.Statistics.push({
                value: 1,
                name: name
              });
            }
          }
          this.initCharts(this.tags, this.Statistics);
        })
        .catch(error => {
          console.log(error);
          alert("网络错误，不能访问");
        });
    },
  }
};
</script>